<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由传参数</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  推荐使用props来传递参数
    $route与对应的路由形成高度的耦合，不够灵活，可以使用propos将组件和路由解耦
  如果props被设置为true,route.params 将会设置为组件属性    
 -->

<body>
  <div id="app">
    <router-link to="/user/1">我的吧1</router-link>
    <router-link to="/user/2">我的吧2</router-link>
    <router-link to="/user/3">我的吧3</router-link>
    <router-link to="/xiao">小茶</router-link>
    <router-link to="/jia">家家惠</router-link>

    <router-view />
  </div>
</body>
<script>
  "use strict";
  const user = {
    props: ["id"],
    template: `<h1>我的吧，我能拿到ID的值:{{id}}</h1>`
  };
  const xiao = {
    template: `<h1>你不知道的，小茶</h1>`
  };
  const jia = {
    template: `<h1>我身体不好，我没前途</h1>`
  };

  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/user"
    }, {
      path: "/user/:id",
      component: user,
      props: true
    }, {
      path: "/xiao",
      component: xiao
    }, {
      path: "/jia",
      component: jia
    }]
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {

    },
    router
  });
</script>

</html>